@import "./reset";
@import "./bootstrap";
@import "./common";

// 头部
header {
    margin-top: 50px;
    .banner {
        width: 100%;
        img {
            width: 100%;
        }
    }
}

// 主要内容
section {
    // 热门游戏
    .hot {
        margin-top: 34px;
        width: 100%;
        .container {
            // 猎刃2
            .top {
                // 左边照片
                .top-img {
                    position: relative;
                    a:first-of-type {
                        width: 38px;
                        height: 100px;
                        background: url(../image/game/图层-551.png) no-repeat;
                        position: absolute;
                        top: -34px;
                        text-decoration: none;
                        @include display-box;
                        justify-content: center;
                        span {
                            font-size: 20px;
                            text-align: center;
                            color: #fff;
                        }
                    }
                    a:last-of-type {
                        img {
                            width: 100%;
                        }
                    }
                }
                // 右边介绍
                .top-introduce {
                    div {
                        a {
                            color: black;
                            text-align: end;
                            text-decoration: none;
                            h2 {
                                font-size: 32px;
                                font-weight: normal;
                                margin-bottom: 10px;
                                @media (max-width: 767px) {
                                    text-align: center;
                                }
                            }
                            p {
                                font-size: 14px;
                                color: #989898;
                                line-height: 28px;
                            }
                        }
                    }
                    // 游戏列表
                    ul {
                        li {
                            margin-top: 30px;
                            text-align: center;
                            @media (max-width: 767px) {
                                padding: 0;
                            }
                            a {
                                img {
                                    border-radius: 10px;
                                    // @media (max-width: 768px) {
                                    //     width: 60%;
                                    // }
                                    &:hover {
                                        box-shadow: 4px 4px 2px #797979;
                                        transform: translateY(-5px);
                                    }
                                }
                            }
                        }
                    }
                }
            }

            // 上吧主公
            .bottom {
                margin-top: 63px;
                margin-bottom: 120px;
                // 左边介绍
                .bot-introduce {
                    div {
                        a {
                            color: black;
                            text-align: start;
                            text-decoration: none;
                            h2 {
                                font-size: 32px;
                                font-weight: normal;
                                margin-bottom: 10px;
                                @media (max-width: 767px) {
                                    text-align: center;
                                }
                            }
                            p {
                                font-size: 14px;
                                color: #989898;
                                line-height: 28px;
                            }
                        }
                    }
                    // 游戏列表
                    ul {
                        li {
                            margin-top: 30px;
                            text-align: center;
                            @media (max-width: 767px) {
                                padding: 0;
                            }
                            a {
                                img {
                                    border-radius: 10px;
                                    &:hover {
                                        box-shadow: 4px 4px 2px #797979;
                                        transform: translateY(-5px);
                                    }
                                }
                            }
                        }
                    }
                }
                // 右边照片
                .bot-img {
                    a {
                        img {
                            width: 100%;
                        }
                    }
                }
            }
        }
    }

    // 更多案例
    .more {
        width: 100%;
        margin-bottom: 94px;
        .container {
            .more-title {
                h2 {
                    font-size: 36px;
                    @media (max-width: 767px) {
                        text-align: center;
                    }
                }
            }
            .row {
                // 游戏图
                li {
                    margin-top: 40px;
                    a {
                        color: #000000;
                        text-decoration: none;
                        text-align: center;
                        @include display-box;
                        flex-direction: column;
                        .bg-img {
                            position: relative;
                            &:hover p {
                                opacity: 0.6;
                            }
                            img {
                                border-radius: 10px;
                                @media (max-width: 767px) {
                                    width: 100%;
                                }
                            }
                            p {
                                border-radius: 10px;
                                padding: 15px;
                                width: 303px;
                                height: 133px;
                                font-size: 14px;
                                color: #fff;
                                background-color: #000000;
                                opacity: 0;
                                position: absolute;
                                top: 0px;
                            }
                        }
                        span {
                            margin-top: 12px;
                            font-size: 16px;
                        }
                    }
                }
            }
        }
    }
}